<template>
  <view class="my-banner">
    <swiper class="swiper" circular indicator-active-color="#fff" indicator-color="#eee" indicator-dots autoplay
      :interval="3000" :duration="500">
      <swiper-item class="swiper-item" v-for="banner in banners" :key="banner['pid']"
        @click="toDetailHandler(banner['pid'])">
        <image :src="banner['bannerImg']"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import {
    req
  } from '../../pages/utils/request/request.js'
  export default {
    name: "MyBanner",
    data() {
      return {
        banners: []
      };
    },
    mounted() {
      this.getBanner()
    },
    methods: {
      toDetailHandler(pid) {
        uni.navigateTo({
          url: '/pages/goods_detail/goods_detail?wd=' + pid
        })
      },
      getBanner() {
        req('banner', {}).then(({
          data: res
        }) => {
          this.banners = res['result']
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-banner {

    margin: 20rpx;
    margin-top: 150rpx;

    .swiper {
      height: 530rpx;
      overflow: hidden;
      border-radius: 20rpx;

      .swiper-item {
        height: 100%;

        image {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
</style>
